<!DOCTYPE html><html>
<head>
    <title>Telerik Academy Courses</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/site.css">
</head>
<body ng-app="app">
<header class="nav navbar">
    <div class="container">
        <h1 class="text-center">JS Apps Crowd Sharing</h1>
    </div>
</header>
</body>
<section class="container text-center">
    <h2 id="total-posts">Last 100 posts:</h2>
    <div id="posts">

    </div>
</section>
<footer>
    <h4 class="text-center">
        &copy; Telerik Academy 2014
    </h4>
</footer>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
    $.get('/post')
            .then(function(result) {
                var totalPosts = result.length;
                var $postsContainer = $('#posts');

                for (var i = 0; i < totalPosts; i++) {
                    var currentPost = result[i];
                    var well = $('<div />').addClass('well').text(currentPost.title + ': "' + currentPost.body + '" by ' + currentPost.user.username).appendTo('#posts');
                }
            });
</script>
</html>